<template>
	<view style="padding-top: 160rpx;">
		<view class="xiaolan dengltext fonweight textcenter">登录</view>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="xiahuaxian">
					<input type="text" autocomplete="off" class="hei_text main_size bold"  @focus="flag=false" @blur="flag=true" placeholder="请输入手机号"
						v-model="mobile">
				</view>
				<view class="xiahuaxian margin_top6">
					<input type="password" autocomplete="off" class="hei_text main_size bold" @focus="flag=false" @blur="flag=true" placeholder="请输入密码"
						v-model="password">
				</view>
			</view>
			<view class="flexbetween">
				<view class="xiaohui ershiba margin_top" @click="jumpurl('/pages/login/codelogin')">验证码登录</view>
				<view class="xiaohui ershiba margin_top" @click="jumpurl('/pages/login/zhuce')">还没账号？点击注册</view>
			</view>
		</view>
		<view class="flexcenter margin_top" style="padding: 0 60rpx;" @click="checkaudio">
			<view class="nocheckaudio" v-show="!type"></view>
			<view class="checkaudio" v-show="type"></view>
			<view class="xiaohui ershiba margin_left1">
				阅读并同意
				<text class="xiaolan ershiba" @click.stop="jumpurl('/pages/system/system?type=1')">《用户协议》</text>
				和
				<text class="xiaolan ershiba" @click.stop="jumpurl('/pages/system/system?type=2')">《隐私政策》</text>
			</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="bigbtn" @click="login()">登录</view>
				<view class="margin_top5 ershiba xiaohui flexcenter" @click="jumpurl('/pages/login/wangjimm')">忘记密码</view>
			</view>
		</view>
		<template v-if="flag">
			<view class="wave wave1"></view>
			<view class="wave wave2"></view>
			<view class="wave wave3"></view>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				mobile: "",
				type: false,
				password: "",
				flag:true
			}
		},
		methods: {
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			checkaudio() {
				this.type = !this.type
			},
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			login() {
				let _this = this;
				if (_this.mobile == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if (!_this.isMobile(_this.mobile)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				if (this.password == "") {
					httpRequest.toast("请输入密码")
					return false
				}
				if (!this.type) {
					httpRequest.toast("请认真阅读并勾选用户协议");
					return false;
				}
				httpRequest.request('/api/user/login', 'GET', {
					account: this.mobile,
					password: this.password
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast('登录成功');
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('user_id', res.data.userinfo.user_id);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dengltext{
		font-size: 60rpx;
		
	}
	.wave {
		position: fixed;
		left: 0;
		bottom: 0px;
		width: 200%;
		height: 100px;
		background-repeat: repeat-x;
		background-position: left bottom;
		transform-origin: center bottom;
		background-size: 50% 90px;
	}

	.wave1 {
		z-index: 5;
		opacity: 1;
		animation: swave 20s linear infinite;
		background-image: url('@/static/image/sysem/bolang.png');
	}

	.wave2 {
		z-index: 4;
		opacity: .3;
		animation: swave 30s linear infinite;
		background-image: url('@/static/image/sysem/bolang.png');
	}

	.wave3 {
		z-index: 3;
		opacity: .5;
		animation: swave 45s linear infinite;
		background-image: url('@/static/image/sysem/bolang.png');
	}

	@keyframes swave {
		0% {
			transform: translateX(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) scaleY(.55)
		}

		100% {
			transform: translateX(-50%) scaleY(1)
		}
	}
</style>